<template>
	<view class="deviceMovement">
		<!-- 材料库存 -- 移库操作 -->
		<!-- goBackUrl="/subpackage-materials/pages/materials/materialsInventory/inventoryManagement" -->
		<navBar title="材料库存管理" @goBack="goBack"></navBar>

		<view class="search">
			<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>
		</view>

		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="nav2" @click="getstation">
					<view class="name">
						<image class="image" src="/static/image/jidi.png" mode=""></image>
						<view class="fonzt active" v-if="params.stationName ===''">点击选择基地</view>
						<view class="fonzt" v-else>{{ params.stationName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>

				<view class="nav2">
					<view class="name" @click="isShowPopupSelect = true">
						<image class="image" src="/subpackage-equipment/static/shebei22.png" mode=""></image>
						<view class="fonzt active" v-if="deviceTypeName === ''">点击选择材料类型和名称</view>
						<view class="fonzt" v-else>{{ deviceTypeName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>

				<view class="info uniCollapse">
					<uni-collapse>
						<checkbox-group @change="checkboxChange">
							<uni-collapse-item v-for="(item,index) in tableData" title-border="show" :key="index"
								:title="item.name" :value="item.list.length+''">
								<template v-slot:title>
									<view class="collapse-title">
										<view class="left">
											{{ item.name }}
										</view>
										<view class="right">
											{{ item.list.length }}
										</view>
									</view>
								</template>
								<label v-for="(i,j) in item.list" :key='j'>
									<view class="center">
										<view class="item">
											<view class="name">规格型号：</view>
											<view class="value">{{i.specificationModel}}</view>
										</view>
										<view class="item">
											<view class="name">过保日期：</view>
											<view class="value">{{i.time}}</view>
										</view>
										<!-- 				<view class="item">
											<view class="name">存储区域：</view>
											<view class="value">{{i.storageAreaName}}</view>
										</view> -->
										<!-- <view class="item">
											<view class="name">供应商：</view>
											<view class="value">{{i.supplier}}</view>
										</view> -->
										<view class="item">
											<view class="name">库存量：</view>
											<view class="value">{{i.num}}吨</view>
										</view>
										<view class="item m40">
											<view class="name">出存量：</view>
											<view class="value right">
												<u-number-box class="number" :min="1" :max="i.num" v-model="i.outNum"
													@change="curr=>comeNumChange(curr,j,index)"
													color="#323233"></u-number-box>
												<text class="unit">吨</text>
											</view>
										</view>
										<checkbox :value="i.index" :checked="i.check" class="checkbox color round" />
									</view>
								</label>
							</uni-collapse-item>
						</checkbox-group>
					</uni-collapse>
				</view>
				<!-- 选中的数量 -->
				<view class="nav mt30" @click="getDeviceList">
					<view class="name">已选</view>
					<view class="value">
						<view class="text red">{{checkNum}}</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#A7AEBD" size="20"></u-icon>
						</view>
					</view>
				</view>

				<!-- 移入存放基地 -->
				<view class="nav">
					<view class="name">移入存放基地</view>
					<view class="value" @click="isShowStation2 = true">
						<view class="text color" v-if="move.stationName ===''" style="color: #c4c4c4;">请选择移入存放基地</view>
						<view class="text" v-else>{{ move.stationName }}</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#A7AEBD" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- <view class="fixedButton">
			<u-button type="primary"  :loading="loading" text="提交" @click="submit"></u-button>
		</view> -->
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="submit" :loading="loading" class="button-primary">提交</button>
			</view>
		</view>
		<u-picker @cancel="isShowStation = false" :immediateChange="true" @confirm="stationSelect" keyName="name"
			:show="isShowStation" :columns="stationList"></u-picker>
		<BaseSelect :titleObj="titleObj" :isShow="isShowPopupSelect" :deviceTypeList="deviceTypeList"
			@cancel="popupSelectCancel" @confrim="popupSelectConfrim">
		</BaseSelect>

		<!-- 选择基地2 -->
		<u-picker :show="isShowStation2" :columns="stationList" keyName="name" :closeOnClickOverlay="true"
			:immediateChange="true" @confirm="stationConfirm2" @cancel="stationCancel2">
		</u-picker>

		<!-- 选择基地2 -->
		<u-picker :show="isShowStation2" :columns="stationList" keyName="name" :closeOnClickOverlay="true"
			:immediateChange="true" @confirm="stationConfirm2" @cancel="stationCancel2">
		</u-picker>
	</view>
</template>

<script>
	import {
		materialGetMaterialInventoryList,
		materialMoveMaterial
	} from "@/api/materials/materials.js"
	import {
		getStationList,
		getStorageAreaList
	} from "@/api/baseManage/baseManage.js"
	import {
		getDeviceType,
		getMaterialList
	} from "@/api/emergency/emergencyDispatch.js"
	import mixins from "@/utils/mixins.js"
	import baseInput from "@/components/baseInput/baseInput.vue"
	import BaseSelect from "@/components/baseSelect/baseSelect.vue"
	import uniCollapse from "../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	import {
		mapMutations,
		mapState
	} from "vuex"
	export default {
		components: {
			baseInput,
			BaseSelect,
			uniCollapse
		},
		mixins: [mixins],
		data() {
			return {
				loading: false, // 基地名称
				deviceTypeName: "", // 设备类型和名称
				// collapseValue: [1], 展开第一个
				tableData: [],
				storageAreaList: [], // 存储区域数据
				isShowStation2: false,
				isShowStation: false,
				isShowStorageArea: false,
				isShowPopupSelect: false,
				deviceTypeList: [],
				stationList: [],
				params: {
					stationName: "",
					stationId: "",
					deviceTypeIds: "",
					subDeviceTypeId: "",
					keyWord: "",
				},
				checkNum: 0,
				checkIndex: [],
				titleObj: {
					deviceType: "材料类型",
					deviceName: "材料名称",
					title: "材料类别及材料名称筛选"
				},
				move: {
					stationId: null,
					stationName: '',
					storageAreaId: null,
					storageAreaName: null
				}
			}
		},
		computed: {
			...mapState('materials', ['inventoryMovementCheckList'])
		},
		mounted() {
			this.init()
		},
		methods: {
			...mapMutations('materials', ["setInventoryMovementCheckList"]),
			async init() {
				let base = await getStationList({
					typeIds: [102, 104],
					name: ""
				})
				this.stationList = [base.result]
				let _data = {
					name: "",
					ex1: 'material',
				}
				// 材料类型 树结构
				let res = await getDeviceType(_data)
				this.getMaterialTypeList(res.result);
				let tabData = this.inventoryMovementCheckList
				if (tabData && tabData.length > 0) {
					this.tableData = tabData
				} else {
					this.getList()
				}
			},
			getList() {
				this.tableData = []
				materialGetMaterialInventoryList(this.params).then(res => {
					if (res.success) {
						let list = res.result
						//获取所有的类型
						let typeList = Array.from(new Set(list.map(item => item.deviceTypeName + "/" + item
							.subDeviceTypeName)))
						let index = 0
						typeList.forEach(item => {
							let itemObj = {
								name: item,
								list: [],
							}
							let subDeviceTypeName = item.split("/")[1]
							list.forEach(i => {
								if (subDeviceTypeName === i.subDeviceTypeName) {
									if (i.expirationDate) {
										i.time = this.getDate2(i.expirationDate)
									}
									itemObj.list.push(i)
									i.check = false
									i.outNum = 1
									index++
									i.index = index + ''
								}
							})
							this.tableData.push(itemObj)
						})
					}
				})
			},
			//基站点击事件
			getstation() {
				this.isShowStation = true
			},
			stationSelect(data) {
				this.isShowStation = false
				this.params.stationName = data.value[0].name
				this.params.stationId = data.value[0].id
				this.getList()
			},
			// input的input事件
			inputChange(e) {
				console.log(e)
				clearTimeout(this.time)
				if (!e) {
					console.log('清除搜索')
					this.clearInput()
					return
				}
				this.time = setTimeout(() => {
					this.params.keyWord = e
					this.getList()
				}, 500)
			},
			clearInput() {
				this.params.keyWord = ""
				this.getList()
			},
			getMaterialTypeList(val) {
				let list = val.map(item => ({
					...item,
					isChecked: false,
					id: item.id + ""
				}))
				let arr2 = list.filter(item => item.treeLevel === 2).map(val => ({
					...val,
					childrenList: []
				}))
				let arr3 = list.filter(item => item.treeLevel === 3)

				arr2.forEach(item => {
					arr3.forEach(value => {
						if (item.id === value.parentId + "") {
							item.childrenList.push({
								...value,
								tempCode: item.id + '-' + value.id
							})
						}
					})
				})
				this.deviceTypeList = arr2
			},
			popupSelectConfrim(deviceList, selectDeviceTypeList, selectDeviceNameList) {
				// console.log(deviceList, selectDeviceTypeList,selectDeviceNameList)
				this.isShowPopupSelect = false
				let str = []
				this.deviceTypeList.forEach(item => {
					selectDeviceTypeList.forEach(value => {
						if (item.id === value) {
							str.push(item.name)
						}
					})
				})
				this.deviceTypeName = str.join(",")
				this.params.deviceTypeIds = selectDeviceNameList
				this.getList()
			},
			// 取消 设备筛选
			popupSelectCancel(bool) {
				// this.obj.deviceTypeIds = []
				this.deviceTypeName = ""
				this.isShowPopupSelect = false
				this.getList()
			},
			// 提交
			submit() {
				if (!this.move.stationId) {
					uni.showToast({
						icon: "none",
						title: "请选择移库存放基地"
					})
					return
				}

				this.loading = true
				let params = []
				this.tableData.forEach(item => {
					item.list.forEach(i => {
						let itemParam = {
							stationId: i.stationId,
							storageAreaId: i.storageAreaId,
							expirationDate: i.expirationDate,
							deviceTypeId: i.deviceTypeId,
							subDeviceTypeId: i.subDeviceTypeId,
							num: i.outNum,
							specificationModel: i.specificationModel ? i.specificationModel : null,
							moveStationId: this.move.stationId,
							moveStorageAreaId: this.move.storageAreaId
						}
						if (i.check) {
							params.push(itemParam)
						}
					})
				})
				materialMoveMaterial(params).then(res => {

					if (res.success) {
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
					}
					this.loading = false
					uni.redirectTo({
						url: '/subpackage-materials/pages/materials/materialsInventory/inventoryManagement'
					})
				})
			},
			comeNumChange(curr, j, index) {
				this.tableData[index].list[j].outNum = curr.value
			},
			checkboxChange(e) {
				this.checkNum = e.detail.value.length
				this.checkIndex = e.detail.value
				this.tableData.forEach(item => {
					item.list.forEach(i => {
						if (this.checkIndex.indexOf(i.index) !== -1) {
							i.check = true
							//用于打开清单页面之后限制 使用同一个check 点击卡片会出现页面刷新
							i.openCheck = true
						} else {
							i.check = false
							i.openCheck = false
						}
						//用于表示删除
						i.delCheck = false
					})
				})
			},
			// 选择基地
			stationCancel2() {
				this.isShowStation2 = false
				this.move.stationName = ""
				this.move.stationId = ""
			},
			stationConfirm2(data) {
				this.move.stationId = data.value[0].id
				this.move.stationName = data.value[0].name
				this.isShowStation2 = false
				let _query = {
					currPage: 1,
					pageSize: 10000,
					params: {
						stationId: this.move.stationId
					}
				}
				//设置默认存储区域
				getStorageAreaList(_query).then(res => {
					this.storageAreaList = res.result.list[0]
					console.log(this.storageAreaList)
					this.move.storageAreaName = res.result.list[0].name
					this.move.storageAreaId = res.result.list[0].id

				})

			},
			// 选择存储区域
			async getStorageArea() {
				if (this.move.stationId && this.move.stationName) {
					let _query = {
						currPage: 1,
						pageSize: 10000,
						params: {
							stationId: this.move.stationId
						}
					}
					let res = await getStorageAreaList(_query)
					this.storageAreaList = [res.result.list]
					this.isShowStorageArea = true
				} else {
					uni.showToast({
						icon: "none",
						title: "请先选择移入存放基地"
					})
				}
			},
			// 选中的设备
			getDeviceList() {
				if (this.checkNum == 0 || this.checkIndex.length == 0) {
					uni.showToast({
						title: '请先选择材料',
						icon: 'error'
					})
					return
				}
				this.tableData.forEach(item => {
					let j = 0
					item.open = false
					item.checkNum = 0
					item.list.forEach(i => {
						if (i.check) {
							j++
						}
					})
					if (j > 0) {
						item.open = true
						item.checkNum = j
					}
				})

				this.setInventoryMovementCheckList(this.tableData)
				uni.navigateTo({
					url: "/subpackage-materials/pages/materials/materialsInventory/inventoryMovementList"
				})
			},

			// 返回上一级
			goBack(url) {
				uni.switchTab({
					url: '/pages/homePage/homePage'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deviceMovement {
		padding-bottom: 80rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		background-color: #F5F7FA;
		/* #ifdef MP-WEIXIN */
		padding-top: 180rpx;

		/* #endif */
		.search {
			padding: 0rpx 30rpx;
			padding-bottom: 24rpx;
			background-color: #FFFFFF;
		}

		.scroll-box {
			max-height: calc(100vh - 364rpx);
			padding-top: 10rpx;
		}

		.content {
			padding: 24rpx 32rpx;
			height: calc(100vh - 390rpx);
		}

		.nav2 {
			background-color: #FFFFFF;
			height: 106rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 26rpx;
			line-height: 106rpx;
			display: flex;
			align-items: center;

			.name {
				flex: 1;
				display: flex;
				align-items: center;

				.fonzt {
					flex: 1;
					width: 248rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.active {
					color: #C0C0C0;
				}

				.image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 24rpx;
				}
			}
		}

		.mt30 {
			margin-bottom: 30rpx;
		}

		.info {
			margin-top: 40rpx;

			.center {
				position: relative;
				background-color: #FFFFFF;
				padding: 32rpx 38rpx;
				padding-top: 12rpx;
				border-bottom: 2rpx solid #E2E5ED;

				.item {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.name {
						width: 150rpx;
					}

					.value {
						flex: 1;
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}

					.unit {
						margin-left: 10rpx;
					}
				}

				.checkbox {
					position: absolute;
					top: 26rpx;
					right: 26rpx;
				}
			}
		}

		.nav {
			display: flex;
			align-items: center;
			width: 100%;
			height: 114rpx;
			line-height: 100rpx;
			border-bottom: 2rpx solid #e8ebf1;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			background-color: #FFFFFF;

			.name {
				width: 200rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
			}

			.value {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #22204E;

				.text {
					flex: 1;
					text-align: right;
					margin-right: 20rpx;
				}

				.red {
					color: #F45151;
				}
			}
		}
	}
</style>